<template>
  <div class="problems-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="navbar-container">
        <div class="navbar-left">
          <router-link to="/home" class="logo-link">
            <svg class="logo-icon" viewBox="0 0 48 48" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="48" height="48" rx="12" fill="url(#logoGradient)"/>
              <path d="M12 32V16L18 24L24 16L30 24L36 16V32" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
              <circle cx="18" cy="25" r="1.5" fill="white" opacity="0.8"/>
              <circle cx="30" cy="25" r="1.5" fill="white" opacity="0.8"/>
              <defs>
                <linearGradient id="logoGradient" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                </linearGradient>
              </defs>
            </svg>
            <span class="logo">M-Learning</span>
          </router-link>
        </div>
        
        <div class="navbar-center">
          <router-link to="/home" class="nav-link">首页</router-link>
          <router-link to="/problems" class="nav-link active">题库</router-link>
          <router-link to="/discussion" class="nav-link">讨论</router-link>
        </div>
        
        <div class="navbar-right">
          <div class="user-info">
            <div class="user-avatar" @click="handleAvatarClick" style="cursor: pointer;" title="点击更换头像">
              <img v-if="userInfo?.avatar" :src="getAvatarUrl(userInfo.avatar)" alt="头像" />
              <span v-else class="avatar-placeholder">{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
            </div>
            <span class="user-name">{{ userInfo?.nickname || '未登录' }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 左侧课程分类 -->
        <div class="sidebar">
          <div class="sidebar-header">
            <h3>📚 课程分类</h3>
          </div>
          
          <div class="course-list">
            <div 
              v-for="course in courses" 
              :key="course.id"
              class="course-item"
              :class="{ active: selectedCourse === course.id }"
              @click="selectCourse(course.id)"
            >
              <div class="course-header">
                <span class="course-icon">{{ course.icon }}</span>
                <span class="course-name">{{ course.name }}</span>
                <span class="course-count">{{ course.totalProblems }}</span>
              </div>
              
              <!-- 展开的章节列表 -->
              <div v-if="selectedCourse === course.id" class="chapter-list">
                <div 
                  v-for="chapter in course.chapters" 
                  :key="chapter.id"
                  class="chapter-item"
                  :class="{ active: selectedChapter === chapter.id }"
                  @click.stop="selectChapter(chapter.id)"
                >
                  <span class="chapter-name">{{ chapter.name }}</span>
                  <span class="chapter-count">{{ chapter.problemCount }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 学习进度 -->
          <div class="progress-card">
            <h4>📊 学习进度</h4>
            <div class="progress-stats">
              <div class="stat-item">
                <span class="stat-label">已完成</span>
                <span class="stat-value">{{ userProgress.solved }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">总题数</span>
                <span class="stat-value">{{ userProgress.total }}</span>
              </div>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
            </div>
            <div class="progress-text">{{ progressPercentage }}%</div>
          </div>
        </div>

        <!-- 右侧题目列表 -->
        <div class="problem-list-container">
          <!-- 筛选工具栏 -->
          <div class="toolbar">
            <div class="toolbar-left">
              <input 
                v-model="searchKeyword"
                type="text"
                class="search-input"
                placeholder="搜索题目..."
              />
            </div>
            
            <div class="toolbar-right">
              <select v-model="difficultyFilter" class="filter-select">
                <option value="">全部难度</option>
                <option value="easy">简单</option>
                <option value="medium">中等</option>
                <option value="hard">困难</option>
              </select>
              
              <select v-model="statusFilter" class="filter-select">
                <option value="">全部状态</option>
                <option value="solved">已完成</option>
                <option value="unsolved">未完成</option>
              </select>
              
              <!-- 管理员新建题目按钮 -->
              <button 
                v-if="userStore.isAdmin" 
                class="btn-create" 
                @click="createProblem"
                title="创建新题目"
              >
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                </svg>
                新建题目
              </button>
            </div>
          </div>

          <!-- 题目列表表格 -->
          <div class="problem-table">
            <div class="table-header">
              <div class="col-status">状态</div>
              <div class="col-title">题目</div>
              <div class="col-difficulty">难度</div>
              <div class="col-acceptance">通过率</div>
            </div>
            
            <div v-if="loading" class="loading">
              <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor" class="spin">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6h2c0-2.21 1.79-4 4-4V6z"/>
              </svg>
              <p>加载中...</p>
            </div>
            
            <div v-else-if="filteredProblems.length === 0" class="empty">
              <p>暂无题目</p>
            </div>
            
            <div v-else class="table-body">
              <div 
                v-for="problem in filteredProblems" 
                :key="problem.id"
                class="problem-row"
                @click="goToProblem(problem.id)"
              >
                <div class="col-status">
                  <svg v-if="problem.status === 'solved'" viewBox="0 0 24 24" width="20" height="20" fill="#52c41a">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                  </svg>
                  <svg v-else-if="problem.status === 'attempted'" viewBox="0 0 24 24" width="20" height="20" fill="#faad14">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
                  </svg>
                </div>
                
                <div class="col-title">
                  <span class="problem-number">{{ problem.id }}.</span>
                  <span class="problem-name">{{ problem.title }}</span>
                  <div class="problem-tags">
                    <span v-for="tag in problem.tags" :key="tag" class="tag">{{ tag }}</span>
                  </div>
                </div>
                
                <div class="col-difficulty">
                  <span 
                    class="difficulty-badge"
                    :class="problem.difficulty"
                  >
                    {{ getDifficultyText(problem.difficulty) }}
                  </span>
                </div>
                
                <div class="col-acceptance">
                  {{ problem.acceptanceRate }}%
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div v-if="totalPages > 1" class="pagination">
            <button 
              class="page-btn"
              :disabled="currentPage === 1"
              @click="changePage(currentPage - 1)"
            >
              上一页
            </button>
            
            <div class="page-numbers">
              <button 
                v-for="page in displayPages" 
                :key="page"
                class="page-number"
                :class="{ active: page === currentPage }"
                @click="changePage(page)"
              >
                {{ page }}
              </button>
            </div>
            
            <button 
              class="page-btn"
              :disabled="currentPage === totalPages"
              @click="changePage(currentPage + 1)"
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏的头像上传input -->
    <input 
      type="file" 
      ref="avatarInput" 
      accept="image/*" 
      style="display: none"
      @change="handleAvatarChange"
    />

    <!-- Toast提示 -->
    <Toast ref="toastRef" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { getAvatarUrl } from '../utils/url'
import { uploadAvatar } from '../api/user'
import { getProblemList, getCourses, getUserProgress } from '../api/problem'
import { toast } from '../utils/toast'
import Toast from '../components/Toast.vue'

const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const avatarInput = ref(null)
const toastRef = ref(null)

// 课程和章节数据
const courses = ref([])

const selectedCourse = ref(1)
const selectedChapter = ref(null)
const searchKeyword = ref('')
const difficultyFilter = ref('')
const statusFilter = ref('')

const problems = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const totalPages = ref(1)

const userProgress = ref({
  solved: 0,
  total: 1060
})

const progressPercentage = computed(() => {
  if (userProgress.value.total === 0) return 0
  return Math.round((userProgress.value.solved / userProgress.value.total) * 100)
})

const displayPages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

const filteredProblems = computed(() => {
  let result = problems.value

  if (searchKeyword.value) {
    result = result.filter(p => 
      p.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  if (difficultyFilter.value) {
    result = result.filter(p => p.difficulty === difficultyFilter.value)
  }

  if (statusFilter.value) {
    result = result.filter(p => 
      statusFilter.value === 'solved' ? p.status === 'solved' : p.status !== 'solved'
    )
  }

  return result
})

onMounted(async () => {
  await loadCourses()
  await loadProblems()
  await loadUserProgress()
})

// 监听筛选条件变化
watch([difficultyFilter, statusFilter], () => {
  currentPage.value = 1
  loadProblems()
})

async function loadCourses() {
  try {
    const res = await getCourses()
    if (res.code === 200 && res.data) {
      courses.value = res.data
      // 默认选择第一个课程
      if (courses.value.length > 0 && !selectedCourse.value) {
        selectedCourse.value = courses.value[0].id
      }
    }
  } catch (error) {
    console.error('加载课程失败:', error)
    toast.error('加载课程失败，请刷新重试')
    // 使用备用数据
    setMockCourses()
  }
}

function setMockCourses() {
  courses.value = [
    {
      id: 1,
      name: '高等数学',
      icon: '📐',
      totalProblems: 520,
      chapters: [
        { id: 101, name: '第一章 函数与极限', problemCount: 80 },
        { id: 102, name: '第二章 导数与微分', problemCount: 75 },
        { id: 103, name: '第三章 微分中值定理', problemCount: 60 },
        { id: 104, name: '第四章 不定积分', problemCount: 70 },
        { id: 105, name: '第五章 定积分', problemCount: 65 },
        { id: 106, name: '第六章 多元函数微分', problemCount: 85 },
        { id: 107, name: '第七章 重积分', problemCount: 85 }
      ]
    },
    {
      id: 2,
      name: '线性代数',
      icon: '📊',
      totalProblems: 280,
      chapters: [
        { id: 201, name: '第一章 行列式', problemCount: 45 },
        { id: 202, name: '第二章 矩阵', problemCount: 50 },
        { id: 203, name: '第三章 向量', problemCount: 40 },
        { id: 204, name: '第四章 线性方程组', problemCount: 55 },
        { id: 205, name: '第五章 特征值与特征向量', problemCount: 50 },
        { id: 206, name: '第六章 二次型', problemCount: 40 }
      ]
    },
    {
      id: 3,
      name: '概率论与数理统计',
      icon: '🎲',
      totalProblems: 260,
      chapters: [
        { id: 301, name: '第一章 随机事件与概率', problemCount: 45 },
        { id: 302, name: '第二章 随机变量及其分布', problemCount: 50 },
        { id: 303, name: '第三章 多维随机变量', problemCount: 45 },
        { id: 304, name: '第四章 数字特征', problemCount: 40 },
        { id: 305, name: '第五章 大数定律', problemCount: 35 },
        { id: 306, name: '第六章 数理统计', problemCount: 45 }
      ]
    }
  ]
}

async function loadProblems() {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    }
    
    // 添加课程筛选
    if (selectedCourse.value) {
      params.courseId = selectedCourse.value
    }
    
    // 添加章节筛选
    if (selectedChapter.value) {
      params.chapterId = selectedChapter.value
    }
    
    // 添加难度筛选
    if (difficultyFilter.value) {
      params.difficulty = difficultyFilter.value
    }
    
    // 添加状态筛选
    if (statusFilter.value) {
      params.status = statusFilter.value
    }
    
    const res = await getProblemList(params)
    
    if (res.code === 200 && res.data) {
      problems.value = res.data.list || []
      totalPages.value = Math.ceil((res.data.total || 0) / pageSize.value)
    }
  } catch (error) {
    console.error('加载题目失败:', error)
    toast.error('加载题目失败')
    // 使用模拟数据
    setMockProblems()
  } finally {
    loading.value = false
  }
}

async function loadUserProgress() {
  try {
    const res = await getUserProgress()
    if (res.code === 200 && res.data) {
      userProgress.value = {
        solved: res.data.solved || 0,
        total: res.data.total || 0
      }
    }
  } catch (error) {
    console.error('加载进度失败:', error)
    // 保持默认值，不显示错误提示
  }
}

function setMockProblems() {
  problems.value = [
    {
      id: 1,
      title: '函数的极限',
      difficulty: 'easy',
      acceptanceRate: 68.5,
      status: 'solved',
      tags: ['极限', '函数']
    },
    {
      id: 2,
      title: '导数的几何意义',
      difficulty: 'medium',
      acceptanceRate: 52.3,
      status: 'attempted',
      tags: ['导数', '几何']
    },
    {
      id: 3,
      title: '微分中值定理应用',
      difficulty: 'hard',
      acceptanceRate: 35.8,
      status: null,
      tags: ['微分', '中值定理']
    }
  ]
  totalPages.value = 3
}

function selectCourse(courseId) {
  selectedCourse.value = courseId
  selectedChapter.value = null
  currentPage.value = 1
  loadProblems()
}

function selectChapter(chapterId) {
  selectedChapter.value = chapterId
  currentPage.value = 1
  loadProblems()
}

function changePage(page) {
  currentPage.value = page
  loadProblems()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

function goToProblem(problemId) {
  router.push(`/problem/${problemId}`)
}

function createProblem() {
  router.push('/problem/new')
}

function getDifficultyText(difficulty) {
  const map = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return map[difficulty] || difficulty
}

// 头像上传功能
function handleAvatarClick() {
  avatarInput.value.click()
}

async function handleAvatarChange(event) {
  const file = event.target.files[0]
  if (!file) return

  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    toastRef.value?.show({
      title: '上传失败',
      message: '请选择图片文件',
      type: 'error'
    })
    return
  }

  // 验证文件大小 (2MB)
  if (file.size > 2 * 1024 * 1024) {
    toastRef.value?.show({
      title: '上传失败',
      message: '图片大小不能超过2MB',
      type: 'error'
    })
    return
  }

  try {
    const formData = new FormData()
    formData.append('avatar', file)

    const { data } = await uploadAvatar(formData)
    
    // 更新用户信息
    userStore.setUserInfo({
      ...userInfo.value,
      avatar: data.avatar
    })

    toastRef.value?.show({
      title: '上传成功',
      message: '头像已更新',
      type: 'success'
    })
  } catch (error) {
    console.error('上传头像失败:', error)
    toastRef.value?.show({
      title: '上传失败',
      message: error.message || '请稍后重试',
      type: 'error'
    })
  } finally {
    // 清空input值，允许重复上传同一文件
    event.target.value = ''
  }
}
</script>

<style scoped lang="scss">
.problems-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.top-navbar {
  background: white;
  border-bottom: 1px solid #e1e4e8;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .navbar-left {
    .logo-link {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
      
      .logo-icon {
        display: block;
        filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.3));
      }
      
      .logo {
        font-size: 24px;
        font-weight: bold;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
  }
  
  .navbar-center {
    display: flex;
    gap: 32px;
    
    .nav-link {
      text-decoration: none;
      color: #57606a;
      font-size: 15px;
      padding: 8px 0;
      border-bottom: 2px solid transparent;
      transition: all 0.2s;
      
      &:hover {
        color: #24292f;
      }
      
      &.active {
        color: #667eea;
        border-bottom-color: #667eea;
        font-weight: 500;
      }
    }
  }
  
  .navbar-right {
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .avatar-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: bold;
        }
      }
      
      .user-name {
        font-size: 14px;
        color: #24292f;
      }
    }
  }
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  
  .content-container {
    display: flex;
    gap: 24px;
  }
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  
  .sidebar-header {
    background: white;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #e1e4e8;
    
    h3 {
      margin: 0;
      font-size: 16px;
      color: #24292f;
    }
  }
  
  .course-list {
    background: white;
    border-radius: 0 0 8px 8px;
    margin-bottom: 16px;
    
    .course-item {
      border-bottom: 1px solid #f6f8fa;
      cursor: pointer;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.active {
        background: #f6f8fa;
      }
      
      .course-header {
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        
        &:hover {
          background: #f6f8fa;
        }
        
        .course-icon {
          font-size: 18px;
        }
        
        .course-name {
          flex: 1;
          font-size: 14px;
          color: #24292f;
          font-weight: 500;
        }
        
        .course-count {
          font-size: 12px;
          color: #57606a;
          background: #f6f8fa;
          padding: 2px 8px;
          border-radius: 10px;
        }
      }
      
      .chapter-list {
        padding: 8px 0;
        background: #fafbfc;
        
        .chapter-item {
          padding: 8px 16px 8px 48px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          
          &:hover {
            background: #f6f8fa;
          }
          
          &.active {
            background: #e6f0ff;
            
            .chapter-name {
              color: #667eea;
              font-weight: 500;
            }
          }
          
          .chapter-name {
            font-size: 13px;
            color: #57606a;
          }
          
          .chapter-count {
            font-size: 12px;
            color: #8c959f;
          }
        }
      }
    }
  }
  
  .progress-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    
    h4 {
      margin: 0 0 12px 0;
      font-size: 14px;
      color: #24292f;
    }
    
    .progress-stats {
      display: flex;
      justify-content: space-around;
      margin-bottom: 12px;
      
      .stat-item {
        text-align: center;
        
        .stat-label {
          display: block;
          font-size: 12px;
          color: #57606a;
          margin-bottom: 4px;
        }
        
        .stat-value {
          display: block;
          font-size: 18px;
          font-weight: 600;
          color: #667eea;
        }
      }
    }
    
    .progress-bar {
      height: 8px;
      background: #f6f8fa;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        transition: width 0.3s;
      }
    }
    
    .progress-text {
      text-align: center;
      font-size: 12px;
      color: #57606a;
    }
  }
}

.problem-list-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  
  .toolbar {
    padding: 16px;
    border-bottom: 1px solid #e1e4e8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .toolbar-left {
      .search-input {
        width: 300px;
        padding: 8px 12px;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        
        &:focus {
          border-color: #667eea;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
      }
    }
    
    .toolbar-right {
      display: flex;
      gap: 12px;
      
      .filter-select {
        padding: 8px 12px;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        cursor: pointer;
        
        &:focus {
          border-color: #667eea;
        }
      }
      
      .btn-create {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
      }
    }
  }
  
  .problem-table {
    .table-header {
      display: grid;
      grid-template-columns: 60px 1fr 100px 100px;
      gap: 16px;
      padding: 12px 16px;
      background: #f6f8fa;
      border-bottom: 1px solid #e1e4e8;
      font-size: 13px;
      font-weight: 600;
      color: #57606a;
    }
    
    .loading,
    .empty {
      padding: 60px 20px;
      text-align: center;
      
      svg {
        animation: spin 1s linear infinite;
        color: #667eea;
        margin-bottom: 16px;
      }
      
      p {
        color: #8c959f;
        font-size: 14px;
        margin: 0;
      }
    }
    
    .table-body {
      .problem-row {
        display: grid;
        grid-template-columns: 60px 1fr 100px 100px;
        gap: 16px;
        padding: 14px 16px;
        border-bottom: 1px solid #f6f8fa;
        cursor: pointer;
        transition: background 0.2s;
        
        &:hover {
          background: #f6f8fa;
        }
        
        .col-status {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .col-title {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .problem-number {
            font-size: 14px;
            color: #57606a;
            flex-shrink: 0;
          }
          
          .problem-name {
            font-size: 14px;
            color: #24292f;
            font-weight: 500;
            flex: 1;
            
            &:hover {
              color: #667eea;
            }
          }
          
          .problem-tags {
            display: flex;
            gap: 6px;
            
            .tag {
              font-size: 11px;
              padding: 2px 8px;
              background: #f6f8fa;
              color: #57606a;
              border-radius: 3px;
            }
          }
        }
        
        .col-difficulty {
          display: flex;
          align-items: center;
          
          .difficulty-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            
            &.easy {
              background: #f0f9ff;
              color: #0969da;
            }
            
            &.medium {
              background: #fff8e5;
              color: #d97706;
            }
            
            &.hard {
              background: #ffebe9;
              color: #cf222e;
            }
          }
        }
        
        .col-acceptance {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #57606a;
        }
      }
    }
  }
  
  .pagination {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid #e1e4e8;
    
    .page-btn {
      padding: 6px 16px;
      background: white;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover:not(:disabled) {
        background: #f6f8fa;
        border-color: #c1c7cd;
      }
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
    
    .page-numbers {
      display: flex;
      gap: 6px;
      
      .page-number {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover {
          background: #f6f8fa;
          border-color: #c1c7cd;
        }
        
        &.active {
          background: #667eea;
          border-color: #667eea;
          color: white;
          font-weight: 500;
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

